<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar 
    class="page-nav-bar" 
    title="个人信息" 
    left-arrow 
    @click-left="$router.back()" />
    <!-- /导航栏 -->

    <!-- 个人信息 -->
    <van-cell title="头像" is-link>
      <van-image 
      class="avatar" 
      fit="cover" 
      round 
      src="https://img.yzcdn.cn/vant/cat.jpeg" />
    </van-cell>

    <van-cell 
    title="昵称" 
    @click="isUpdateNameShow = true" 
    value="程序员" 
    is-link 
    />
    <van-cell title="性别" 
    value="男" 
    is-link />
    <van-cell 
    title="生日" 
    value="2003-07-10" is-link />

    <!-- /个人信息 -->

    <!-- 编辑昵称 -->
    <van-popup 
    v-model="isUpdateNameShow" 
    style="height: 100%;" 
    position="bottom"
    >
        <update-name 
        v-if="isUpdateNameShow"
        v-model="user.name"
        @clos="isUpdateNameShow = false"
        >
        </update-name>
    </van-popup>

    <!-- /编辑昵称 -->
    
  </div>
</template>

<script>
  import UpdateName from './components/update-name'
  export default {
    // 组件名称
    name: 'UserProfile',
    // 局部注册的组件
    components: {
        UpdateName,
    },
    // 组件参数 接收来自父组件的数据
    props: {
        value: {
            type: String,
            required: true
        }
    },
    // 组件状态值
    data() {
      return {
        message: this.value,
        isUpdateNameShow: false,
        localName: this.value
      }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    created() {},
    mounted() {},
    // 组件方法
    methods: {}
  }
</script>

<style scoped lang="less">
    .user-profile {
        .avatar {
            width: 60px;
            height: 60px;
        }
        .van-popup {
            background: #f5f7f9;
        }
    }
</style>